<template>
  <div>
    <p>请输入参数（英文逗号分割）</p>
    <input type="text" name="canshu" v-model="input">
    <button @click="createZhe">折线图</button>
    <button @click="createZhu">柱状图</button>
    <div v-if="showimg" class="imgdiv">
      <span>点击下载原图到本地</span>
      <button @click="downloadimg" class="download">下载</button>
    </div>
      <img v-if="showimg" src="../../src/assets/img.png" width="330px">
  </div>
</template>

<script>
export default {
  name: "tools",
  data() {
    return {
      input: '',
      showimg: false
    }
  },
  methods: {
    createZhe() {
      this.showimg = true
    },
    createZhu() {
      this.showimg = true
    },
    downloadimg() {
      alert('开发中，敬请期待！')
    }
  }
}
</script>

<style scoped>
button {
  margin: 0px 5px 0px 5px;
}
.download {
  margin: 10px;
}
.imgdiv {
  position: relative;
  height: 20px;
}
img {
  position: relative;
  top: 30px;
}
input {
  margin: 3px;
  padding: 5px;
}
</style>
